<template>
	<view class="" :style="[AppSkinVar]">
		<view class="e-p-20">
			<view class="history-item e-font-24 e-m-b-20" v-for="item in list" :key="item.id">
				<view class="e-flex e-m-b-12">
					<text class="c-secondary e-p-r-20">{{$t('tools.申请代理等级')}}: </text>
					<text class="c-333">{{$t(getAgentLevel(item.agentLevel))}}</text>
				</view>
				<view class="e-flex e-m-b-12">
					<text class="c-secondary e-p-r-20">{{$t('tools.代理区域')}}: </text>
					<text class="c-333">{{item.agentAddress}}</text>
				</view>
				<view class="e-flex e-m-b-12">
					<text class="c-secondary e-p-r-20">{{$t('tools.申请时间')}}: </text>
					<text class="c-333" v-if="item.createTime">{{item.createTime}}</text>
				</view>
				<view class="e-flex e-m-b-20">
					<text class="c-secondary e-p-r-20">{{$t('tools.审核状态')}}: </text>
					<text class="c-333">{{$t(stateText(item.state))}}</text>
				</view>
				<view class="refuse-box e-p-20 e-font-24" v-if="item.reason">
					<view class="c-secondary e-m-b-12">
						{{$t('tools.拒绝原因')}}:
					</view>
					<view class="c-333">
						{{item.reason}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { getAgentApplyList } from '@/common/request/api'
	import type { AgentApplyItem } from '@/common/request/api'
	const states = ['tools.待审核', 'tools.已通过', 'tools.已拒绝']
	const levelList = [{
		name: 'tools.省代',
		label: 1
	}, {
		name: 'tools.市代',
		label: 2
	}, {
		name: 'tools.areaAgency',
		label: 3
	}, {
		name: 'tools.street',
		label: 4
	}]

	const list = ref<AgentApplyItem[]>([])


	const getAgentLevel = (val : number) => {
		if (!val) return ''
		const _list = levelList?.map(item => item.name)
		return _list[val - 1]
	}
	const stateText = (val : number) => {
		if (val == null) return ''
		return states[val]
	}


	const getData = () => {
		getAgentApplyList().then(res => {
			list.value = res.data
		})
	}
	getData()
</script>

<style lang="scss" scoped>
	.history-item {
		padding: 30rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.refuse-box {
		background: #F7F7F7;
		border-radius: 10rpx;
	}
</style>